<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  height: 100vh;
			  background: #1a1e23;
			}
			
			.progress {
			  --value: 50;
			  --width: 25em;
			  --dark-color: rgba(0, 0, 0, 0.25);
			  --light-color: cyan;
			  --duration: 3s;
			  position: relative;
			  width: var(--width);
			  height: 1em;
			  -webkit-animation: loading var(--duration) ease-out forwards;
			          animation: loading var(--duration) ease-out forwards;
			}
			.progress .progress-bar {
			  height: inherit;
			  background: var(--dark-color);
			}
			.progress .progress-bar .progress-value {
			  width: calc(var(--value) * 1%);
			  height: inherit;
			  background: var(--light-color);
			}
			.progress .progress-bar .progress-indicator {
			  width: 2em;
			  height: 2em;
			  border-radius: 50%;
			  position: absolute;
			  top: -13px;
			  left: 0;
			  z-index: 2;
			  background: #222;
			  border: 4px solid var(--light-color);
			  counter-reset: progress var(--value);
			  transform: translateX(calc(var(--value) * var(--width) / 100 - 2em));
			}
			.progress .progress-bar .progress-indicator::after {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  position: absolute;
			  content: counter(progress) "%";
			  width: 100%;
			  height: 100%;
			  color: var(--light-color);
			  font-size: 9px;
			}
			.progress .progress-start {
			  width: 2em;
			  height: 2em;
			  border-radius: 50%;
			  position: absolute;
			  top: -13px;
			  left: -12px;
			  background: #222;
			  border: 4px solid var(--light-color);
			}
			.progress .progress-start svg {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 100%;
			  height: 100%;
			  transform: scale(0.6);
			}
			.progress .progress-end {
			  width: 2em;
			  height: 2em;
			  border-radius: 50%;
			  position: absolute;
			  top: -13px;
			  right: -12px;
			  background: #222;
			  border: 4px solid var(--dark-color);
			}
			.progress .progress-end svg {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 100%;
			  height: 100%;
			  transform: scale(0.6);
			  opacity: 0.25;
			}
		</style>
	</head>
	<body>
		<div class="progress">
		    <div class="progress-bar">
		        <div class="progress-start"><svg t="1570790869213" class="icon" viewBox="0 0 1024 1024" version="1.1"
		                xmlns="http://www.w3.org/2000/svg" p-id="2837" width="24" height="24">
		                <path d="M511.3 676.9m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#66ffff" p-id="2838"></path>
		                <path
		                    d="M960 756V138.5H64V756h320.1v85.5H256.2v44h511.9v-44h-128V756H960zM108 182.5h808v427.1H108V182.5z m488.1 659h-168V756h168v85.5zM108 712v-82.5h808V712H108z"
		                    fill="#66ffff" p-id="2839"></path>
		                <path
		                    d="M167.536 327.703l90.72-90.721 14.143 14.142-90.721 90.72zM172.959 423.469l181.159-181.16 14.142 14.143L187.1 437.61z"
		                    fill="#66ffff" p-id="2840"></path>
		            </svg></div>
		        <div class="progress-value"></div>
		        <div class="progress-indicator"></div>
		        <div class="progress-end"><svg t="1570791095607" class="icon" viewBox="0 0 1024 1024" version="1.1"
		                xmlns="http://www.w3.org/2000/svg" p-id="4578" width="24" height="24">
		                <path
		                    d="M769.848889 881.550222H242.716444C114.631111 887.182222 6.058667 790.755556 0.284444 666.083556c-5.831111-124.643556 93.297778-230.286222 221.383112-235.946667-0.341333-151.466667 120.234667-277.191111 275.541333-287.288889 155.306667-10.069333 291.982222 98.929778 312.32 249.116444 130.901333 19.626667 224.113778 134.200889 213.703111 262.684445-10.410667 128.512-120.888889 227.470222-253.354667 226.901333z m-496.355556-82.090666h496.355556c60.273778 0 115.968-31.288889 146.090667-82.062223a160.341333 160.341333 0 0 0 0-164.152889c-30.151111-50.801778-85.816889-82.090667-146.090667-82.062222-11.178667 0-21.902222-4.323556-29.809778-12.032a40.476444 40.476444 0 0 1-12.373333-29.013333c0-113.322667-94.378667-205.198222-210.830222-205.198222-116.451556 0-210.858667 91.875556-210.858667 205.198222v8.618667c99.697778 27.648 168.504889 116.195556 168.675555 217.088 0 14.648889-8.021333 28.216889-21.077333 35.555555a43.178667 43.178667 0 0 1-42.183111 0 40.846222 40.846222 0 0 1-21.048889-35.555555c0-79.160889-65.848889-143.416889-147.2-143.644445-81.521778 0-147.598222 64.312889-147.598222 143.644445 0 79.303111 66.076444 143.644444 147.598222 143.644444h16.440889c4.608-0.768 9.329778-0.768 13.937778 0z"
		                    fill="#000000" p-id="4579"></path>
		            </svg></div>
		    </div>
		</div>
	</body>
</html>
